//修改组件
import React from 'react';
import { Modal, Button, Input,   } from 'antd';
import './index.css'
// const { Option } = Select;

export default class App extends React.Component {
  constructor(props) {
    super(props)
  }

  state = {
    loading: false,
    visible: false,
    key: '',
    num: '',
    name: '',
    age: '',
    project:'',
    classs: '',
    graduate: '',
    profession: '',
    education: '',
    phone: '',
    graduateTime: '',
    integral: '',
    nums: ''//选中修改的元素num

  };
  showModal = () => {

    this.setState({ visible: true })
  };

  handleOk = () => {//提交后触发函数

    this.setState({ loading: true });
    setTimeout(() => {
      this.setState({ loading: false, visible: false });
    }, 1500);
    this.props.ccc(this.state)
  };

  handleCancel = () => {
    this.setState({ visible: false });
  };
  handleOnChange = (e) => {//input受控组件
    this.setState({ [e.target.name]: e.target.value });

  }
  ccc = (e) => {//子组件回调
    let data = JSON.parse(localStorage.getItem('data2'))
    let Num = (Number((e.target.parentNode.parentNode.parentNode.firstChild.nextSibling).innerText));
    let datas = data.filter((item) => {
      if (Number(item.num) == Num) {
        return item
      }
    })
    console.log(datas);

    let cc = JSON.parse(JSON.stringify(this.state))
    cc = { ...cc, ...datas[0], nums: Num }
    this.setState({ ...cc })

    this.showModal()
    console.log('促发了子组件回调', this.state);
  }

  // handleChange = (value) => {//下啦选项 学生
  //   // console.log(this);
  //   this.setState({ classs: value });
  // }
  // //handleChangeGraduate
  // handleChangeGraduate = (value) => {//下啦选项 学生
  //   this.setState({ graduate: value });
  // }
  // //handleChangeProfession
  // handleChangeProfession = (value) => {//下啦选项 学生
  //   this.setState({ profession: value });
  // }
  // handleChangeeDucation = (value) => {//下啦选项 学生
  //   this.setState({ ducation: value });
  // }

  onChange = (date, dateString) => {
    // console.log(date, dateString);
    this.setState({graduateTime:dateString})
  }
  render() {
    const { visible, loading } = this.state;
    return (
      <>
        <Button type="primary" onClick={(e) => { this.showModal(); this.ccc(e); }}>
          修改
        </Button>
        <Modal
          visible={visible}
          title="Title"
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          footer={[
            <Button key="back" onClick={this.handleCancel}>
              Return
            </Button>,
            <Button key="submit" type="primary" loading={loading} onClick={(e) => { this.handleOk() }} >
              Submit
            </Button>,
          ]}
        >

          <div className='input'>
            {/* <div className='divs'> 排名: <Input placeholder="1" onChange={this.handleOnChange} name='key' value={this.state.key} /></div>
            <div className='divs'> 姓名: <Input placeholder="张三" onChange={this.handleOnChange} name='name' value={this.state.name} /></div>
            <div className='divs'> 年龄: <Input placeholder="18" onChange={this.handleOnChange} name='age' value={this.state.age} /></div> */}
            <div className='divs'> 积分: <Input placeholder="18" onChange={this.handleOnChange} name='integral' value={this.state.integral} /></div>
            {/* <div className='divs'> 产品经理: <Input placeholder="产品经理" onChange={this.handleOnChange} name='project' value={this.state.project} /></div>
            <div className='divs'> 电话: <Input placeholder="13879521354" onChange={this.handleOnChange} name='phone' value={this.state.phone} /></div>
        
            <div className='divs'> 班级: <Select defaultValue="web一" style={{ width: 120 }} onChange={this.handleChange}>
              <Option value="web一">web一</Option>
              <Option value="web二">web二</Option>
              <Option value="web三">web三</Option>
            </Select></div>
            <div className='divs'> 毕业学校: <Select defaultValue="南昌理工" style={{ width: 120 }} onChange={this.handleChangeGraduate}>
              <Option value="南昌理工">南昌理工</Option>
              <Option value="江西软大">江西软大</Option>
              <Option value="江西科技">江西科技</Option>
            </Select></div>
        
            <div className='divs'> 专业: <Select defaultValue="web软件技术" style={{ width: 120 }} onChange={this.handleChangeProfession}>
              <Option value="web软件技术">web软件技术</Option>
              <Option value="美术">美术</Option>
              <Option value="幼师">幼师</Option>
            </Select></div>
          
            <div className='divs'> 学历: <Select defaultValue="本科" style={{ width: 120 }} onChange={this.handleChangeeDucation}>
              <Option value="本科">本科</Option>
              <Option value="专科">专科</Option>
            </Select></div> */}
          
           
          </div>
          {/* <div className="divLcz" >
              <Space direction="vertical" >
                <DatePicker className='ccc' placeholder='请选择' onChange={this.onChange} />
               
              </Space>
            </div> */}
        </Modal>
      </>
    );
  }
}


